<template>
  <a-modal :visible="visible" :title="isReg ? '注册' : '登录'" :footer="null" @cancel="cancel" :zIndex="1001">
    <div class="three-login" v-if="loginType !== 'from'">
      <span class="item">
        <WechatOutlined class="wx" />
        <div>微信登录</div>
      </span>
    </div>
    <div class="from-login" v-else>
      <a-form layout="vertical" ref="formRef" :rules="rules" :model="from">
        <a-form-item label="用户名" name="username">
          <a-input size="large" v-model:value="from.username" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item label="密码" name="password">
          <a-input size="large" type="password" v-model:value="from.password" placeholder="请输入密码" />
        </a-form-item>
        <a-form-item label="验证码" name="captcha" v-if="isReg">
          <a-input size="large" v-model:value="from.captcha" placeholder="验证码">
            <template #suffix>
              <img :src="'/show/common/captcha?v=' + codeStr" @click="codeStr = new Date().getTime()" style="height:25px" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" size="large" block @click="login()" v-if="!isReg">登录</a-button>
          <a-button type="primary" size="large" block @click="register()" v-else>注册</a-button>
          <div class="reg-text" @click="regDisplay()" v-if="!isReg">没有账户？点击注册</div>
          <div class="reg-text" @click="regDisplay()" v-else>已有账户，返回登录</div>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script>
  import { defineComponent, computed, reactive, ref, toRefs } from 'vue';
  import { useStore } from 'vuex';
  import { WechatOutlined } from '@ant-design/icons-vue';
  import io from '@/utils/http/index.js';
  import { useRoute } from 'vue-router';
  import { message } from 'ant-design-vue';

  export default defineComponent({
    components: { WechatOutlined },
    setup() {
      const store = useStore();
      const route = useRoute();

      // 获取用户信息
      store
        .dispatch('user/getUserInfo')
        .then((res) => {
          store.commit('common/setParams', { appReady: true });
        })
        .catch((e) => {
          if (route.meta.requiresAuth && !store.state.user.userInfo) {
            store.commit('common/setParams', { loginDisplay: true });
          }
          store.commit('common/setParams', { appReady: true });
        });

      const state = reactive({
        from: {
          username: '',
          password: '',
          captcha: ''
        },
        loginType: 'from',

        formRef: ref(),
        
        // 是否注册
        isReg: false,

        codeStr: new Date().getTime()
      })

      const cancel = () => {
        store.commit('common/setParams', { loginDisplay: false });
        state.formRef.resetFields();
      };

      const login = () => {
        state.formRef.validate().then(() => {
          io({
            url: `/show/user/login`,
            method: 'post',
            data: state.from,
          }).then((res) => {
            message.success('登录成功')
            store.commit('user/setParams', { userInfo: res.data })
            cancel()
          }).catch(e => {
            message.error(e.msg)
          })
        })
        
      }

      const register = () => {
        state.formRef.validate().then(() => {
          io({
            url: `/show/user/reg`,
            method: 'post',
            data: state.from,
          }).then(res => {
            regDisplay()
            message.success('注册成功，请登录')
          }).catch(e => {
            message.error(e.msg)
            this.codeStr = new Date().getTime()
          })
        })
      }

      const regDisplay = () => {
        state.from = {
          username: '',
          password: '',
        };
        state.formRef.resetFields();
        state.isReg = !state.isReg;
      }

      const rules = {
        username: [{
          required: true,
          message: '请输入用户名',
        }, {
          min: 3,
          max: 22,
          message: '用户名只能3-22位字符'
        }],
        password: [{
          required: true,
          message: '请输入密码',
        }, {
          min: 5,
          max: 22,
          message: '密码只能5-22位字符'
        }],
        captcha: [{
          required: true,
          message: '请输入验证码'
        }]
      };

      return {
        rules,
        visible: computed(() => store.state.common.loginDisplay),
        ...toRefs(state),
        cancel,
        login,
        register,
        regDisplay
      }
    },
  });
</script>
<style lang="scss">
.three-login {
  text-align: center;
  font-size: 12px;
  padding: 40px 0;
  .item {
    cursor: pointer;
    .anticon {
      font-size: 52px;
    }
    .wx {
      color: #07c160;
    }
  }
}
.from-login {
  .reg-text {
    font-size: 12px;
    text-align: right;
    color: $color;
    padding-top: 5px;
    cursor: pointer;
  }
}
</style>
